<template>
	<view class="register" :style="{height:wh+'px'}">
		<!-- <view class="title">
			<image src="../../static/images/register.png" mode="aspectFit"></image>
			<image src="../../static/images/register2.png" mode="aspectFit"></image>
		</view> -->
		<view class="juzhong">
			<h1>注册</h1>
			<view class="content">
			<uni-forms ref="form" :rules="rules" :model="regForm" validateTrigger="blur">
				<uni-forms-item name="username">
					<uni-easyinput prefix-icon="person" v-model="regForm.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput prefix-icon="locked" type="password" v-model="regForm.password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="mobilePhoneNumber">
					<uni-easyinput prefix-icon="phone" type="number" v-model="regForm.mobilePhoneNumber"
						placeholder="请输入手机" />
				</uni-forms-item>
				<uni-forms-item name="email">
					<uni-easyinput prefix-icon="email" v-model="regForm.email" placeholder="请输入邮箱" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="register(form)">注册</button>
		</view>
		</view>
		
		<view class="login">
			<navigator url="/pages/login/login">已有账号，去登录</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onReady
	} from "@dcloudio/uni-app"
	import { userStore } from "../../store/userStrore.js"

	const regForm = ref({
		username: '',
		password: '',
		mobilePhoneNumber: '',
		email: ''
	})
	const form = ref(null)
	const store = userStore()

	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	const wh = ref(0)
	onReady(() => {
		// wh.value=uni.getSystemInfo().windowHeight
		// console.log(uni.getSystemInfo().windowHeight);
		wh.value = uni.getWindowInfo().windowHeight
		console.log(uni.getWindowInfo().windowHeight)
	})

	function register(form) {
		form.validate().then(res => {
			// 验证通过,进行接口请求用户注册
			console.log('注册数据:', regForm.value); // 输出请求数据以便调试

			uni.$post("https://julwaqq0.lc-cn-n1-shared.com/1.1/users", regForm.value).then(res2 => {
				// 返回码400表示注册失败。显示错误信息
				if (res2.username != null) {
					uni.showToast({
						title: res2.message,
						icon: "error"
					})
					return;
				}
				// 返回码200表示注册成功，显示成功信息，并返回
				if (res2.username == null) {
					uni.showToast({
						title: "成功注册，请进行登录",
						icon: "success"
					})
					store.addUserInfo(regForm.value.username)
					uni.navigateBack()
				}
			})
		}).catch(err => {
			// 验证失败
			console.log(err);
		})
	}

	const rules = ref({
		username: {
			rules: [{
					required: true,
					errorMessage: "请输入用户名"
				},
				{
					pattern: "^\\w{3,10}$",
					errorMessage: '请输入3-10位数字字母和下划线作为用户名'
				}
			]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: "请输入密码"
				},
				{
					pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
					errorMessage: '请输入3-10位数字字母和特殊字符密码'
				}
			]
		},
		mobilePhoneNumber: {
			rules: [{
				required: true,
				errorMessage: "请输入手机号码"
			}, {
				pattern: '^1[3-9]\\d{9}$',
				errorMessage: "电话号码格式错误"
			}]
		},
		email: {
			rules: [{
					required: true,
					errorMessage: "请输入电子邮箱"
				},
				{
					pattern: '^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$',
					errorMessage: '电子邮箱格式错误'
				}
			]
		}
	})
</script>

<style scoped>
	.register {
display: flex; /* 使用 Flexbox */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		height: 100vh; /* 使其占满整个视口高度 */
		background-image: url("../../static/zc.png"); /* 背景图片 */
		background-size: cover; /* 背景图片覆盖整个区域 */
		background-position: center; /* 背景图片居中 */
		background-repeat: no-repeat; /* 不重复背景图片 */
	}
	.juzhong {
		background: rgba(255, 255, 255, 0.6); /* 背景颜色，稍微透明 */
		border-radius: 10px; /* 圆角 */
		padding: 20px; /* 增加内边距 */
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
		max-width: 400px; /* 设置最大宽度 */
		width: 75%; /* 使其宽度为100% */
		text-align: center; /* 内容居中 */
	}

	.register .title {
		margin-top: 70px;

	}

	.register .title image:nth-child(1) {
		height: 50px;
	}

	.register .title image:nth-child(2) {
		height: 30px;
	}

	.register .content {
		margin: 10px 20px;
	}

	.register .login {
		position: absolute;
		width: 100vw;
		text-align: center;
		color: #fff;
		bottom: 20px;
		font-size: 20rpx;
	}
</style>